//3D显示 
<template>
  <el-row :gutter="6" style="height:100%">
    <el-col :span="24" style="height:100%">
      <div class="main" style="height:100%">
        <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
        <!-- <video
          id="myPlayer"
          src="http://hls01open.ys7.com/openlive/54796f76561d415a895b7ef8c2ffd0b6.m3u8"
          controls
          autoplay
          muted
        ></video>-->
        <el-row :gutter="20" style="height:100%">
          <el-col :span="24" style="height:100%">
            <video
              class="videoContainer"
              id="myVideo0"
              controls
              autoplay
              muted
              src="http://hls01open.ys7.com/openlive/54796f76561d415a895b7ef8c2ffd0b6.hd.m3u8"
            ></video>
          </el-col>
          <!-- <el-col :span="12" style="height:100%">
            <video
              class="videoContainer"
              id="myVideo1"
              controls
              autoplay
              muted
              src="https://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8"
            ></video>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="height:100%">
          <el-col :span="12" style="height:100%">
            <video
              class="videoContainer"
              id="myVideo2"
              controls
              autoplay
              muted
              src="https://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8"
            ></video>
          </el-col>
          <el-col :span="12" style="height:100%">
            <video
              class="videoContainer"
              id="myVideo3"
              controls
              autoplay
              muted
              src="https://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8"
            ></video>
          </el-col> -->
        </el-row>

        <!-- <div v-for="(item,i) in list" :key="i" style="margin-bottom: 30px">
          <video :id="'myVideo'+item.id" controls autoplay muted :src="item.src"></video>
        </div>-->
      </div>
    </el-col>
  </el-row>
</template>


<script>
import EZUIKit from "@/assets/js/ezuikit.js";
export default {
  inject: ["reload"],
  components: {},

  // 初始化
  created() {
    console.log("woshuaxinla!!!!");
    setTimeout(() => {
      this.initVideo();
    }, 2500);
  },

  mounted() {},

  watch: {},

  data() {
    return {
      list: [
        {
          src:
            "http://hls01open.ys7.com/openlive/54796f76561d415a895b7ef8c2ffd0b6.hd.m3u8",
           
          id: 0,
          pic: ""
        },
        // {
        //   src:
        //     "https://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8",
        //   id: 1,
        //   pic: ""
        // },
        // {
        //   src:
        //     "https://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8",
        //   id: 2,
        //   pic: ""
        // },
        // {
        //   src:
        //     "https://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8",
        //   id: 3,
        //   pic: ""
        // }
      ]
    };
  },

  methods: {
    initVideo() {
      //    setTimeout(() => {
      //   // 开始初始化直播源地址
      //   let player = new EZUIKit.EZUIPlayer("myPlayer");
      //   // 播放
      //   player.play();
      // }, 2500);
      // // 结束
      // // player.stop();

      //初始化视频方法 循环列表获取每个视频的id
      this.list.map((item, i) => {
        let myPlayer = new EZUIKit.EZUIPlayer("myVideo" + item.id);
        myPlayer.play();
      });
      // 结束
      // myPlayer.stop();
    }
  },

  computed: {}
};
</script>
<style lang='less' scoped>
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.model {
  flex: 1;
}

.videoContainer{
 width: 100%;
 height: 100%;
}
</style>